<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码比对实例</title>
</head>
<body>
    <input type="text" name="password" />
    <input type="text" name="confirm_password" />
    <br />
    <span name="msg"></span>
</body>
<script type="text/javascript">

    //获取Dom对象
    function queryByName(name){
        return document.querySelector(`[name='${name}']`);
    }
    //获取两个输入框的信息
    let inputs = document.querySelectorAll("[name='password'],[name='confirm_password']");
    [...inputs].map(item => {
        "use strict"
        item.addEventListener("keyup",()=>{
            let msg = '';
            if(queryByName('password').value != queryByName('confirm_password').value||queryByName('password').value.length < 5){
                msg = '两次密码不一致或者长度错误';
            }else{
                msg = '密码验证成功';
            }
            queryByName('msg').innerHTML = msg;
        });
    });
</script>
</html>